<script setup lang="ts">

</script>

<route lang="json">
{
  "style": {
    "navigationBarTitleText": "Status"
  }
}
</route>

<template>
  <view class="main">
    <view class="m-margin">
      <text class="title">单据列表</text>
      <view class="m-margin" />
      <eui-status type="primary" title="尚未审核" />
      <view class="m-margin" />
      <eui-status type="warning" title="正在审批" />
      <view class="m-margin" />
      <eui-status type="success" title="已审核" />
      <view class="m-margin" />
      <eui-status type="error" title="审批未通过" />
      <view class="m-margin" />
      <eui-status type="invalid" title="已作废" />
      <view class="m-margin" />
      <eui-status type="add1" title="新增类型" />
    </view>
    <view class="m-margin">
      <text class="title">单据详情内</text>
      <view class="m-margin" />
      <eui-status type="primary_detail" title="尚未审核" />
      <view class="m-margin" />
      <eui-status type="warning_detail" title="正在审批" />
      <view class="m-margin" />
      <eui-status type="success_detail" title="已审核" />
      <view class="m-margin" />
      <eui-status type="error_detail" title="审批未通过" />
      <view class="m-margin" />
      <eui-status type="invalid_detail" title="已作废" />
    </view>
    <view class="m-margin">
      <text class="title">第三类状态示例</text>
      <view class="m-margin" />
      <eui-status type="primary_third" title="业务尚未开始" />
      <view class="m-margin" />
      <eui-status type="warning_third" title="业务进行中" />
      <view class="m-margin" />
      <eui-status type="success_third" title="业务完成" />
      <view class="m-margin" />
      <eui-status type="error_third" title="业务失败" />
      <view class="m-margin" />
      <eui-status type="invalid_third" title="业务取消" />
    </view>
  </view>
</template>

<style lang="scss">
.main {
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}
.title {
  font-weight: 400;
  font-size: 28px;
  color: #333333;
  line-height: 40px;
  text-align: left;
  font-style: normal;
}
.m-margin {
  margin: 20px;
}
</style>
